<!-- 职工心声 -->
<template>
  <div class="index">
    <div>
      <div class="container" id="container">
        <div class="main-box">
          <div class="banner-box">
            <div class="banner-content">
              <div class="title">用户心声</div>
              <div class="e-title">Voice</div>
            </div>
            <div class="banner-content">
            </div>
          </div>
          <div class="content">
            <div class="breadcrumb-box">
              <span class="breadcrumb">
                <i class="el-icon-location-outline">位置：</i>
              </span>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>心声</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
          <span class="demonstration">日期筛选：</span>

          <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                          unlink-panels :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
          <el-button type="primary" @click="selectTime">查询</el-button>
          <el-button type="primary" @click="addVoice" class="button1">发布心声</el-button>
          <el-button type="primary" @click="exportExcle()">导出</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                         :total="bireListLength">
          </el-pagination>
          <div class="coantier">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="title" label="标题" width="180">
              </el-table-column>
              <el-table-column prop="createBy" label="创建人" width="180"></el-table-column>
              <el-table-column prop="createTime" label="时间">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small" @click="exportPdf(scope.row)">保存pdf到本地</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 添加心声dialog -->
        <el-dialog title="写出你的心声" :visible.sync="dialogVisible" width="60%">
          <el-input v-model="voice.title" placeholder="标题" style="margin-bottom: 20px;"></el-input>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="voice.content">
          </el-input>
          <el-input v-model="voice.createBy" placeholder="作者" style="margin-top: 20px;"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="conAddVoice">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 简报详情dialog -->
        <el-dialog title="详情" :visible.sync="brieVisible" width="60%">
          <div>
            <span>标题 ：{{ voice.title }}</span>
            <el-divider> 内容<i class="el-icon-document"></i></el-divider>
            <span>{{  voice.content }}</span>
            <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
            <span>时间 ： {{  voice.createTime }}</span>
            <el-divider content-position="right">创建人 ：{{  voice.createBy }}</el-divider>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.getVoiceList()
  },
  data() {
    return {
      value: '',
      bireListLength: 0,
      tableData: [{}],
      current: 1,//当前页
      pageSize: 5,//每页显示条数,
      time: {
        beginTime: '',
        endTime: ''
      },
      voice: {
        id: '',
        content: '',// 心声文本,
        title: '', // 心声标题
        createBy: '', // 作者
        createTime: ''
      },
      dialogVisible: false,
      brieVisible: false,

    }
  },
  watch: {
    value() { // 日期变化
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.voiceListPage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.voiceListPage()
    },
    voiceListPage() {
      this.$axios.get("/voice/listPage", {
            params: {
              current: this.current,
              pageSize: this.pageSize,
              beginTime: this.time.beginTime,
              endTime: this.time.endTime
            }
          }
      ).then((res) => {
        this.tableData = res.data.data.records
        this.bireListLength = res.data.data.total
      });
    },
    // 时间格式化
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var second = date.getSeconds();
      second = second < 10 ? ('0' + second) : second;
      var time = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
      return time;
    },
    selectTime() {
      var timeArr = [];
      if (this.value == null) {
        this.time.beginTime = ''
        this.time.endTime = ''
        this.getVoiceList();
      } else {
        timeArr = this.value
        this.time.beginTime = this.timestampToTime(timeArr[0])
        this.time.endTime = this.timestampToTime(timeArr[1])
        this.getVoiceList();
      }

    },
    // 简报分页
    getVoiceList() {
      this.$axios.get("/voice/listPage", {
            params: {
              current: this.current,
              pageSize: this.pageSize,
              beginTime: this.time.beginTime,
              endTime: this.time.endTime
            }
          }
      ).then((res) => {
        this.tableData = res.data.data.records
        this.bireVoiceLength = res.data.data.records.length
      });
    },
    handleClick(item) {
      this.brieVisible = true
      this.$axios.get("/voice/getVoiceById", {
            params: {
              id: item.id
            }
          }
      ).then((res) => {
        this.voice.content = res.data.data.content
        this.voice.createTime = res.data.data.createTime
        this.voice.title = res.data.data.title
        this.voice.createBy = res.data.data.createBy
      });
    },
    // 发布心声
    addVoice() {
      this.dialogVisible = true

    },
    conAddVoice() {
      this.$axios.post("/voice/save",
          this.voice
      ).then((res) => {
        var code = res.data.code;
        if (code == 1) {
          this.$message({
            showClose: true,
            message: "发布成功",
            type: 'success'
          })
          this.voice.createBy = "匿名"
          this.getVoiceList()
        } else {
          this.$message({
            showClose: true,
            message: "发布失败",
            type: 'error'
          })
        }

      });
      this.dialogVisible = false
      this.voice = {}
    },
    exportExcle() {
      console.log(this.value)
      var timeArr = [];
      if (this.value == '') {
        this.time.beginTime = ''
        this.time.endTime = ''
      } else {
        timeArr = this.value
        this.time.beginTime = this.timestampToTime(timeArr[0])
        this.time.endTime = this.timestampToTime(timeArr[1])
      }
      this.$axios.get("/voice/export", {
            params: {
              beginTime: this.time.beginTime,
              endTime: this.time.endTime
            }
          }
      ).then((res) => {
        if (res.status == 200) {
          this.$message({
            showClose: true,
            message: "已导出至桌面",
            type: 'success'
          })
        }
      });
    },
    // 导出pdf到本地
    exportPdf(item) {
      this.$axios.get("/voice/getVoiceById", {
            params: {
              id: item.id
            }
          }
      ).then((res) => {
        this.voice.content = res.data.data.content
        this.voice.createTime = res.data.data.createTime
        this.voice.title = res.data.data.title
        this.voice.createBy = res.data.data.createBy
      })
      console.log(this.voice)
      this.$axios.post("/voice/exportPdf", this.voice).then((res) => {
        if (res.data == 1) {
          this.$message("导出成功");

        }
      })
    }
  }

}
</script>

<style scoped lang="scss">
.banner-box {
  width: 100%;
  height: 330px;
  background: url("../assets/images/banner.png");

  .banner-content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 90px;
  }

  .title {
    font-size: 40px;
    color: white;
  }

  .e-title {
    font-size: 14px;
    color: white;
  }
}

.content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .breadcrumb {
    font-size: 14px;
    font-weight: 700;
    color: #4e4e4e;
  }

  .breadcrumb-box {
    display: flex;
    align-items: center;
    margin: 25px 0;
  }
}

.news-box {
  width: 1200px;
  margin: 0px auto;
  // min-height: 502px;
  height: calc(100% - 495px);
  cursor: pointer;

  .circle {
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #2373d5;
    margin-top: 10px;
  }

  .news-item {
    display: grid;
    grid-template-columns: 2% 63% 15% 20%;
    line-height: 24px;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px dashed #ccc;

    &:hover {
      color: #2373d5;
    }

    .news-title {
      text-overflow: ellipsis;
      /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
      white-space: nowrap;
      /*让文字不换行*/
      overflow: hidden;
      /*超出要隐藏*/
    }
  }
}

.pagination {
  text-align: center;
  padding-top: 20px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
  line-height: 22px;
}

.button1 {
  margin-left: 20px;
}
</style>
